<script setup lang="ts">
import myAxios from "../../plugins/MyAxios.ts";
import {onMounted, ref} from "vue";
import {showFailToast} from "vant";

const currentPage = ref(1)
const totalItems = ref<number>()
onMounted(async () => {
  try {
    const userCount = sessionStorage.getItem("totalUserCount");
    if (userCount == null) {
      const result = await myAxios.get('/user/totalUserCount');
      totalItems.value = result.data.data
      sessionStorage.setItem("totalUserCount", result.data.data)
    } else {
      totalItems.value = userCount as any
    }
    const result = await myAxios.post('/user/recommend', {
      thePageNum: 1,
      pageSize: 5
    });
    userList.value = result.data.data.records
  } catch (e) {
    showFailToast("网络异常")
    console.log(e)
  }
})

const userList = ref()
const isEmpty = ref<boolean>(false)
const recommend = async () => {
  const result = await myAxios.post('/user/recommend', {
    thePageNum: currentPage.value,
    pageSize: 5
  });
  if (result.data.data.length <= 0) {
    isEmpty.value = true
  } else {
    isEmpty.value = false
    userList.value = result.data.data.records
  }
}
</script>

<template>
  <van-empty v-if="isEmpty" description="查询结果为空" />
  <div v-if="!isEmpty">
    <div
        v-for="item in userList" :key="item.id"
        style="
        display: flex;
        justify-content: space-between;
        background-color:rgb(246, 248, 250);
        margin-bottom: 5px
        "
    >
      <div style="display: flex;">
        <div>
          <van-image width="100" height="100" :src="item.avatarUrl" fit="cover"></van-image>
        </div>
        <div style="margin-left: 30px">
          <p>{{ item.userAccount }}</p>
          <van-tag plain type="primary" v-for="tag in JSON.parse(item.tags)" style="margin-right: 3px">{{tag}}</van-tag>
        </div>
      </div>
      <van-button
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          style="margin-top: 55px; margin-right: 10px"
      >
        联系我
      </van-button>
    </div>
  </div>
  <van-pagination
    v-model="currentPage"
    :total-items="totalItems"
    :items-per-page="5"
    :show-page-size="3"
    force-ellipses
    @change="recommend"
/>
</template>

<style scoped>

</style>